<div class="content__title">
    <h1>
        Modal
    </h1>
</div>
<div nz-row [nzGutter]="16">
    <div nz-col [nzMd]="12">
        <ng-template #modelContent>
            <p>Some contents...</p>
            <p>Some contents...</p>
            <p>Some contents...</p>
            <p>Some contents...</p>
        </ng-template>
        <nz-card>
            <ng-template #title>Basic</ng-template>
            <ng-template #body>
                <div class="pb-md">
                    <button nz-button (click)="basicModel(modelContent)">Open</button>
                    <button nz-button (click)="confirmModel(modelContent)">Confirm</button>
                </div>
                <button nz-button (click)="showModel('info')">Info</button>
                <button nz-button (click)="showModel('success')">Success</button>
                <button nz-button (click)="showModel('error')">Error</button>
                <button nz-button (click)="showModel('warning')">Warning</button>
            </ng-template>
        </nz-card>
    </div>
    <div nz-col [nzMd]="12">
        <nz-card>
            <ng-template #title>Custom Component</ng-template>
            <ng-template #body>
                <button nz-button (click)="customCompModel()">Default</button>
                <button nz-button (click)="customCompModel('sm')">Small</button>
                <button nz-button (click)="customCompModel('lg')">Large</button>
                <div class="mt-sm">
                    <pre [innerHTML]="options | json"></pre>
                </div>
            </ng-template>
        </nz-card>
    </div>
</div>
